<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="tools/animate/animate.min.css"/>
</head>
<body>
<!--动态导航-->
<header class="header-area header-one" th:fragment="comm-dyna_nevigation">
    <div class="container">
        <div class="row">
            <div class="col-md-2 col-xs-6">
                <div class="log-area">
                    <a href="index.html"><img src="" alt=""></a>
                </div>
            </div>
            <div class="col-md-9">
                <div class="menu-area white">
                    <nav>
                        <ul>
                            <li><a href="/">首页</a></li>
                            <li class=" sub"><a>分类 <span class="fa fa-angle-down"></span></a>
                                <ul class="sub-menu">
                                    <li>
                                        <a href="#" th:each="category:${categoryList}"
                                           th:if="${categoryList!=null}"
                                           th:text="${category.name}"
                                           th:onclick="refresh([[${category.id}]],null,null)">home one</a></li>
                                </ul>
                            </li>
                            <li><a href="#">日记</a></li>
                            <li><a href="#">留言板</a></li>
                            <li><a href="#">关于</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="col-md-1 col-xs-6">
                <div class="humbargar-area">
                    <div class="menu-icon text-right">
                        <span class="flaticon-menu humbargar color"></span>
                    </div>
                    <div class="close-area">
                        <span class="close"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!--菜单-->
<div class="sidebar-menu " th:fragment="comm-menu">
    <div class="close-area">
        <span class="close"><i class="icon fa fa-times-circle"></i></span>
    </div>
    <div class="main-menu">
        <nav>
            <ul>
                <li id="jump-login" sec:authorize="!isAuthenticated()"><a href="#">后台登录</a></li>
                <li sec:authorize="isAuthenticated()"><a href="/admin">进入后台</a></li>
                <li><a href="#">portfolio</a></li>
                <li><a href="#">blog</a></li>
                <li><a href="#">contact us</a></li>
            </ul>
        </nav>
    </div>
</div>
<!--菜单简介-->
<div class="banner-area banner-three" th:fragment="comm-banner">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="banner-content">
                    <div class="banner-title white">
                        <h1>Strtz3's Blog</h1>
                    </div>
                    <div class="banner-subtitle white ">
                        <h4>Code So Fun</h4>
                    </div>
                    <div class="banner-info">
                        <p>欢迎来到我的个人博客，本博客主要用于整理笔记和学习 </p>
                    </div>
                    <div class="social-media">
                        <ul>
                            <li><a href="#"><i class="fa fa-weibo"></i></a></li>
                            <li><a href="#"><i class="fa fa-github"></i></a></li>
                            <li><a href="#"><i class="fa fa-qq"></i></a></li>
                            <li><a href="#"><i class="fa fa-weixin"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--文章列表-->
<div class="single-post animated fadeIn" th:fragment="comm-blog"
     th:each="article,index:${pageInfo.list}"
     th:if="${pageInfo.list!=null}">
    <div class="inner-post">
        <div class="post-img">
            <a href="#" th:href="@{/blog(aid=${article.id})}">
                <img th:src="${article.firstPicture}" alt="blog">
            </a>
        </div>
        <div class="post-info">
            <div class="post-title">
                <h3>
                    <a th:href="@{/blog(aid=${article.id})}" th:text="${article.title}"></a>
                </h3>
            </div>
            <div class="post-content">
                <p th:text="${article.description}"></p>
            </div>
            <div class="blog-meta fix">
                <div class="meta-left pull-left">
                    <ul>
                        <li>
                            <span class="flaticon-comment-black-oval-bubble-shape user"></span>
                            <p>
                                <a th:text="${article.category.name}"
                                   th:if="${article.category !=null}">文章分类</a>
                            </p>
                        </li>
                        <li><span class="flaticon-calendar clendar"></span>
                            <p th:text="${#dates.format(article.createTime,'yyyy-MM-dd')}"></p></li>
                    </ul>
                </div>
                <div class="post-readmore pull-right">
                    <a href="#" th:href="@{/blog(aid=${article.id})}" class="readmore-btn">Read More
                        <span>+</span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="post-date one">
        <span th:text="${index.count}">01</span>
    </div>
</div>
<!--分页栏-->
<div class="pagination-area" th:fragment="comm-pageBar">
    <div class="pagination">
        <ul th:if="${pageInfo.pages}>1">
            <li class="prev" th:if="${pageInfo.hasPreviousPage}">
                <a href="#" th:onclick="refresh([[${h_cid}]],[[${h_lid}]],[[${pageInfo.pageNum}-1]])">PRev</a>
            </li>
            <li th:each="i:${#numbers.sequence(1, pageInfo.pages)}"
                th:class="${i == pageInfo.pageNum} ? 'page active' : 'page'"
                th:if="${pageInfo.pages !=null}">
                <a href="#" th:onclick="refresh([[${h_cid}]],[[${h_lid}]],[[*{i}]])"
                   th:text="*{i}">01</a>
            </li>
            <li class="next pull-right">
                <a href="#" th:onclick="refresh([[${h_cid}]],[[${h_lid}]],[[${pageInfo.pageNum}+1]])"
                   th:if="${pageInfo.hasNextPage}">Next</a>
            </li>
        </ul>
    </div>
</div>
<!--侧边框-->
<div class="col-lg-4" th:fragment="comm-side">
    <!--搜索-->
    <div class="sidebar-widget">
        <div class="single-widget search-widget box-shadow">
            <div class="widget-inner">
                <div class="search-from box-shadow">
                    <input type="text" id="keyword" name="keyword" placeholder="Serach">
                    <button onclick="refresh(null,null,null)" class="search-icon"><i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </div>
        <!--个人简介-->
        <div class="single-widget profile-widget box-shadow">
            <div class="widget-inner text-center">
                <div class="profile-img">
                    <img src="site/assets/images/portfolio/avatar.png" alt="profile">
                </div>
                <div class="profile-name">
                    <h3>Strtz3</h3>
                    <p>Professional Blogger</p>
                </div>
                <div class="social-media">
                    <ul>
                        <li><a href="#"><i class="fa fa-weibo"></i></a></li>
                        <li><a href="https://github.com/strtz3/myblog"><i class="fa fa-github"></i></a></li>
                        <li><a href="#"><i class="fa fa-qq"></i></a></li>
                        <li><a href="#"><i class="fa fa-wechat"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--分类-->
        <div class="single-widget category-widget box-shadow">
            <div class="widget-inner">
                <div class="widget-title">
                    <h3>分类</h3>
                </div>
                <div class="category-list">
                    <ul>
                        <li th:each="category:${categoryList}"
                            th:onclick="refresh([[${category.id}]],null,null)"
                            th:if="${categoryList!=null}">
                            <a href="#" th:value="${category.id}"
                               th:utext="${category.name}+ '<span>'+${category.blogNum}+'</span>'"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 标签-->
        <div class=" single-widget banner-widget box-shadow">
            <div class="widget-inner">
                <div class="widget-title">
                    <h3 style="display: inline-block">标签</h3>
                </div>
                <a href="#"
                   th:each="label:${labelList}"
                   th:onclick="refresh(null,[[${label.id}]],null)"
                   th:if="${labelList!=null}"
                   class="btn  btn-sm"
                   style="margin: 3px; background: white ; color: #8981ff; border: 1px solid #8981ff ;">
                    <span th:text="${label.name}">Git</span>&nbsp;
                    <span
                            th:text="${label.blogNum}">1</span>
                </a>
            </div>
        </div>

        <!--最新文章-->
        <div class="single-widget recent-post-widget box-shadow">
            <div class="widget-inner">
                <div class="widget-title">
                    <h3>最新文章</h3>
                </div>
                <div class="recent-post-list">
                    <div class="single-post"
                         th:each="article,index:${lastArticle}"
                         th:if="${lastArticle}"
                         th:unless="${index.count>5}">
                        <div class="posty-img">
                            <a href="#" th:href="@{/blog(aid=${article.id})}">
                                <img th:src="${article.firstPicture}" alt="post">
                            </a>
                        </div>
                        <div class="post-title">
                            <h4>
                                <a href="#" th:href="@{/blog(aid=${article.id})}" th:text="${article.title}"></a>
                            </h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
<!--footer-->
<footer class="footer-area" th:fragment="comm-footer">
    <div class="footer-top">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="footer-widget widget-text">
                        <div class="footer-logo">
                            <h2><a href="#">Strtz3 </a></h2>
                        </div>
                        <div class="widget-content">
                            <p>欢迎来到我的个人博客，本博客主要用于整理笔记和学习, 感谢【犬山葵啊】提供的模板</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="footer-widget widget-nave">
                        <div class="widget-title">
                            <h3>Quick Link</h3>
                        </div>
                        <div class="widget-nave-list">
                            <ul>
                                <li><a href="#">Fashion </a></li>
                                <li><a href="#">Life style</a></li>
                                <li><a href="#">Creative</a></li>
                                <li><a href="#">Traveling</a></li>
                                <li><a href="#">Guide</a></li>
                                <li><a href="#">World Tour</a></li>
                                <li><a href="#">Ship Tour</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">

                    <div class="footer-widget widget-recent-post">

                        <div class="widget-title">
                            <h3>Recent Post</h3>
                        </div>
                        <div class="recent-post-list" th:each="article,index:${lastArticle}" th:if="${lastArticle}">
                            <div class="single-post" th:unless="${index.count>4}">
                                <p><a href="#" th:href="@{/blog(aid=${article.id})}" th:text="${article.title}"></a></p>
                            </div>
                        </div>
                    </div>
                </div>
                <!--底部联系-->
                <div class="col-md-3">
                    <div class="footer-widget widget-Subscribe">
                        <div class="widget-title">
                            <h3>Contact Me</h3>
                        </div>
                        <div>
                            <img src="site/assets/images/portfolio/wechat.jpg" alt="wechat">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="copyright-area">
                        <p>&copy; 2020 Strtz3 . All rights Reserved.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

<!--文章显示-->
<div class="blog-details-area section animated fadeIn" th:fragment="article-show">
    <!--typo-->
    <link rel="stylesheet" href="tools/typo/typo.css"/>
    <!--prism-->
    <link rel="stylesheet" href="tools/prism/prism.css"/>
    <!--prism-->
    <script src="tools/prism/prism.js"></script>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="single-post box-shadow" th:if="${article!=null}">
                    <!--图片-->
                    <div class="post-thumnile">
                        <div class="slide-thumbnile">
                            <img th:src="${article.firstPicture}" alt="blog">
                        </div>
                    </div>
                    <div class="post-title">
                        <h3 th:text="${article.title}">Tourism in cox's bazar</h3>
                    </div>
                    <div class="blog-meta">
                        <ul>
                            <li><span class="flaticon-man-user user"></span>
                                <p>By <a href="#">Strtz3</a></p></li>
                            <li><span class="flaticon-calendar clendar"></span>
                                <p th:text="${#dates.format(article.createTime,'yyyy-MM-dd')}">20 Jan 2018 </p></li>
                            <li><span class="flaticon-video-player "></span>
                                <p th:text="${view}"></p></li>
                            <li><span class="flaticon-chat comment"></span>
                                <p th:text="${article.commentNum}">Comment</p></li>
                        </ul>
                    </div>
                    <div class="blog-content">
                        <div id="wrapper" class="typo typo-selection" th:utext="${article.content}"/>
                    </div>
                    <!--评论-->
                    <div th:replace="site/common/com-template::comm-comment"/>
                </div>
            </div>
        </div>
    </div>
</div>


<!--未使用-->
<!--评论-->
<div class="comment-area box-shadow mt-70" th:fragment="comm-comment">
    <div class="section-title">
        <h3>发表评论</h3>
    </div>
    <div class="comment-list">
        <div class="single-comment">
            <div class="member-image">
                <a href="#"><img src="site/assets/images/portfolio/avatar.png" alt="comment img"></a>
            </div>
            <div class="comment-info">
                <div class="comment-title">
                    <h4><a href="#">Strtz3</a> <span>2020-09-06</span></h4>
                </div>
                <div class="comment-content">
                    <p>测试 </p>
                </div>
                <div class="comment-replay">
                    <a href="#" class="replay-btn">Reply</a>
                </div>
            </div>
        </div>
        <div class="single-comment pl-100">
            <div class="member-image">
                <a href="#"><img src="site/assets/images/portfolio/avatar.png" alt="comment img"></a>
            </div>
            <div class="comment-info">
                <div class="comment-title">
                    <h4><a href="#">Strtz3</a> <span>2020-09-06</span></h4>
                </div>
                <div class="comment-content">
                    <p>回复测试 </p>
                </div>
                <div class="comment-replay">
                    <a href="#" class="replay-btn">Reply</a>
                </div>
            </div>
        </div>
    </div>
    <div class="comment-from mt-63">
        <div class="section-title">
            <h3>快来留下你的足迹吧~</h3>
        </div>
        <form action="#">
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group box-shadow">
                        <input type="text" class="form-control" id="name" name="name"
                               placeholder="Your name ">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group box-shadow">
                        <input type="email" class="form-control" id="emailtwo" name="emailtwo"
                               placeholder="Email">
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group box-shadow">
                                        <textarea name="messagetwo" id="messagestwo" cols="30" rows="10"
                                                  placeholder="Message"></textarea>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="from-btn">
                        <button type="submit" class="primary-btn">Submit Now</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!--底部分享栏-->
<div class="social-share fix" th:fragment="comm-share">
    <div class="share-title pull-left">
        <h4>Share with:</h4>
    </div>
    <div class="share-media pull-right">
        <div class="social-media">
            <ul>
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-skype"></i></a></li>
                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                <li><a href="#"><i class="fa fa-behance"></i></a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>